<template>
  <!-- 历史采集数据 -->
  <BaseMainSlot :show-btn-box="false">
    <template v-slot:search-box>
      <SearchForm :formConfig="formConfig" :formData="searchlist" @search="search" @packUp="setheight"
        @getbatchlisttwo="getbatchlisttwo" @getfacilitylisttwo="getfacilitylisttwo"
        @getdataitemside="getdataitemside"></SearchForm>
    </template>
    <template v-slot:table-box>
      <div class="analysis-list">
        <div ref="zklchart" class="zchart">
          <zhchart v-if="zhexiantulistone.xAxisdata.length > 0" ref="testyuy" :cdata="zhexiantulistone" :nowwidth="newwidth" :nowheight="newheight" :font-size="15" />
          <div v-else style="width: 100%;">
            请先选择查询条件 预计效果：
            <zhchart
              ref="testyuy"
              :cdata="zhexiantulistones"
              :nowwidth="newwidth"
              :nowheight="newheight"
              :font-size="15"
            />
          </div>
        </div>
      </div>
    </template>
  </BaseMainSlot>
</template>
<script>
// import selectbutton from "@/components/selectbutton/index.vue"
// import nowpagereq from "@/api/digital-production/production-statistics/yield-analysis"
import SearchForm from '@/components/searchForm';
import nowpagereq from "@/api/digital-production/growth-record-management/history-collection-data"
import BaseMainSlot from "@/components/BaseMainSlot/newBaseMainSlot.vue"
import { mymixin } from "@/utils/mixin"
import * as echarts from "echarts";

import zhchart from "@/components/Echarts/components/linechart/chart.vue"
// import { getToken } from '@/utils/auth';
export default {
  name: "HistoryCollectionData",
  components: { SearchForm, BaseMainSlot, zhchart },
  mixins: [mymixin],
  data() {
    return {
      formConfig: [
        {
          label: '选择年份',
          prop: 'selectyear',
          type: 'year',
          change: 'getbatchlisttwo',
        }, {
          label: '选择批次',
          prop: 'batchNo',
          type: 'select',
          change: 'getfacilitylisttwo',
          options: [], // searchlist.batchList
          optionKey: { label: 'batchName', value: 'batchNo' },
        }, {
          label: '选择设施',
          prop: 'facilityNo',
          type: 'select',
          change: 'getdataitemside',
          options: [], // searchlist.facilityList
          optionKey: { label: 'facilityName', value: 'facilityNo' }
        }, {
          label: '选择数据项',
          prop: 'dataItemId',
          type: 'select',
          options: [], // echartsidelist
          optionKey: { label: 'dataItemName', value: 'dataItemId' }
        }, {
          label: '选择时间',
          prop: 'date',
          type: 'daterange',
        },
      ],
      // 可选择数据项列表
      echartsidelist: [],
      // 当前选择状态选择的数据index
      noselecttypestau: "",
      // 对比搜索项1---获取地块的数据项
      searchlist: {
        selectyear: "",
        batchList: [],
        facilityList: [],
        facilityNo: "",
        batchNo: ""
      },
      // 循环数组,每次点击加号里面加个1
      // ----
      newwidth: "95%",
      newheight: "100%",
      testchartlist: {
        xAxisdata: ["test1", "test2", "test3"],
        xData: ["产量（万斤）"],
        seriesData: [
          {
            name: '温度',
            type: 'line',
            data: [1430, 3474, 2384],
            barWidth: 20,
            itemStyle: {
              normal: {
                borderRadius: [10, 10, 0, 0],
                // barBorderRadius: 5,
                // barBorderRadius: [10, 10, 0, 0],
                color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                  { offset: 0, color: "#04FA99" },
                  { offset: 1, color: "#3EACE5" }
                ])
              }
            }
          }
        ]
      },
      zhexiantulistone: {
        xAxisdata: [],
        xData: [],
        seriesData: []
      },
      zhexiantulistones: {
        xAxisdata: ["01-01", "01-02", "01-03", "01-04", "01-05", "01-06"],
        xData: ["01-01", "01-02", "01-03", "01-04", "01-05", "01-06"],
        seriesData: [{
          name: "数据项值",
          type: 'line',
          data: [43, 324, 423, 423, 243, 24],
          barWidth: 10,
          itemStyle: {
            normal: {
              barBorderRadius: 5,
              color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                { offset: 0, color: "#04FA99" },
                { offset: 1, color: "#3EACE5" }
              ])
            }
          }
        }]
      },
    };
  },
  mounted() {
    this.getheight()
    // this.getlastmessage()
    // this.getbatchlisttwo()
    // this.getzhexiandataleft()
  },
  methods: {
    // 获取默认数据
    // getlastmessage() {
    //   nowpagereq.getlastmessage().then(
    //     res => {
    //       if (res.data) {
    //         let newlist = res.data
    //         this.zhexiantulistone = {
    //           xAxisdata: newlist.xAxisdata,
    //           xData: newlist.xData,
    //           seriesData: [
    //             {
    //               name: '产量（斤）',
    //               type: 'line',
    //               symbol: "none",
    //               data: newlist.seriesData[0].data,
    //               barWidth: 20,
    //               itemStyle: {
    //                 normal: {
    //                   borderRadius: [10, 10, 0, 0],
    //                   color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
    //                     { offset: 0, color: "#04FA99" },
    //                     { offset: 1, color: "#3EACE5" }
    //                   ])
    //                 }
    //               }
    //             }
    //           ]
    //         }
    //         console.log(this.zhexiantulistone)
    //       }
    //     }
    //   )
    // },
    search() {
      this.getzhexiandataleft();
    },
    // 获取折线图
    getzhexiandataleft() {
      console.log('.zchart');
      let id = this.searchlist?.dataItemId
      if (!id) {
        this.$message.closeAll();
        this.$message.warning("请选择数据项");
        return
      }
      // this.weatherdataleft[i]["nowselect"] = !this.weatherdataleft[i]["nowselect"]
      let date = this.dateToFormattwo(new Date())
      let params = {
        "dataItemId": id || '暂无id',
        "endTime": `${date} 23:59:59`,
        "startTime": `${date} 00:00:00`
      }
      if (this.searchlist?.date[1]) {
        params.startTime = this.dateToFormat(this.searchlist.date[0])
        params.endTime = this.dateToFormat(this.searchlist.date[1])
      }
      nowpagereq.getzhexiandataleft(params).then(
        res => {
          this.handingzhexiangone(res.data)
        }
      )
    },
    // 折线图数据处理
    handingzhexiangone(list) {
      let xAxisdata = []
      let xData = ["zh"]
      let seriesData = [
        {
          name: "数据项值",
          type: 'line',
          data: [],
          barWidth: 10,
          itemStyle: {
            normal: {
              barBorderRadius: 5,
              color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                { offset: 0, color: "#04FA99" },
                { offset: 1, color: "#3EACE5" }
              ])
            }
          }
        }
      ]
      list.forEach(
        item => {
          seriesData[0]["data"].push(item.value)
          let ggdate = this.dateToFormat(item.collectDatetime)
          xAxisdata.push(ggdate)
        }
      )
      this.zhexiantulistone = {
        "xAxisdata": xAxisdata,
        "xData": xData,
        "seriesData": seriesData
      }
    },
    // 当前选择的时0总产量-1亩均产量
    noselecttype(i) {
      this.noselecttypestau = i
      // this.toanalysisdata()
    },
    // 批次选择
    getbatchlisttwo() {
      this.$set(this.searchlist, 'batchNo', '')
      this.$set(this.searchlist, 'facilityNo', '')
      this.$set(this.searchlist, 'dataItemId', '')
      // console.log(this.searchlist.selectyear)
      const zhdt = this.searchlist.selectyear && new Date(this.searchlist.selectyear);
      const y = zhdt.getFullYear();
      let dateparams = {
        startTime: `${y}-01-01`,
        endTime: `${y}-12-30`,
        organizationNo: sessionStorage.organizationNo
      }
      nowpagereq.getbatchlist(dateparams).then(
        res => {
          this.searchlist.batchList = res.data
          this.formConfig[1].options = res.data;
        }
      )
    },
    // 获取地块
    getfacilitylisttwo() {
      this.$set(this.searchlist, 'facilityNo', '')
      this.$set(this.searchlist, 'dataItemId', '')
      nowpagereq.getfacilitylist(this.searchlist.batchNo).then(
        res => {
          this.searchlist.facilityList = res.data
          this.formConfig[2].options = res.data;
        }
      )
    },
    // 获取当前地块或地块组下的dataitem,不带环境数据
    getdataitemside() {
      this.$set(this.searchlist, 'dataItemId', '')
      let params = {
        facilityNo: this.searchlist.facilityNo
      }
      nowpagereq.getdataidechart(params).then(
        res => {
          this.echartsidelist = res.data
          this.formConfig[3].options = res.data;
        }
      )
    },
    // 后端数据处理方法
    chancedata(list) {
      let nowlist = JSON.parse(JSON.stringify(list))
      if (!nowlist[0]["partYieldList"]) {
        this.$message.warning("数据错误，请检查")
        return
      }
      let newlist = []
      nowlist.forEach(
        (item, index) => {
          let objitem = {
            name: "产量（斤）",
            type: 'line',
            barWidth: 20,
            itemStyle: {
              normal: {
                borderRadius: [10, 10, 0, 0],
                color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                  { offset: 0, color: "#04FA99" },
                  { offset: 1, color: "#3EACE5" }
                ])
              }
            },
            data: []
          }
          item.partYieldList.forEach(
            (lhitem, lhindex) => {
              objitem.data.push(lhitem.monthsYield)
            }
          )
          newlist.push(objitem)
        }
      )
      // 获取x轴数据
      let xAxisdata = []
      nowlist[0]["partYieldList"].forEach(
        xitem => {
          xAxisdata.push(xitem.months + "月")
        }
      )
      this.testchartlist.xAxisdata = xAxisdata
      this.testchartlist.seriesData = newlist
    },
    save() {
      console.log("save")
    },
    getheight() {
      const klll = this.$refs.zklchart;
      let heightone = klll.clientHeight;
      this.newheight = heightone + 'px';
      this.$refs.testyuy.resetsty()
    },
    setheight() {
      this.$nextTick(() => {
        this.getheight()
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.search-list{
  width: 100%;
  height: 100px;
  overflow: auto;
}
.analysis-list{
  width: 100%;
  height: 100%;
  // border: rgb(55, 211, 55) solid 1px;
  font-size: 20px;
  overflow: hidden;
  .analy-list-itemone{
    width: 100%;
    display: flex;
    height: 50px;
    flex-direction: row;
    // justify-content: space-between;
    .itemone-one{
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin: 5px;
      .search-line{
        display: flex;
        white-space: nowrap;
        height: 50px;
        line-height: 50px;
      }
    }
  }
}
.zchart{
  // background-color: turquoise;
  width: 100%;
  margin-top: 10px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  flex-direction: row;
    flex-wrap: wrap;
  // background-color: turquoise;
  ::v-deep &>div {
    height: 100%;
  }
}
.search-item-two{
  margin-left: 5px;
  width: 500px;
  white-space:nowrap;
  display: flex;
  height: 35px;
  margin-right: 20px;
  align-items: center;
  justify-content: space-between;
  // background-color: brown;
}
.search-item-two-two{
    width: 100px;
    height: 35px;
    line-height: 35px;
    border: rgb(43, 205, 226) 1px solid;
    text-align: center;
    margin-left: 10px;
    cursor: pointer;
  }
</style>
